<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      body { font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; background: #121212; }
      .main-card {
        background: linear-gradient(120deg, #1F1F1F 60%, #2A2A2A 100%);
        border-radius: 22px;
        box-shadow: 0 6px 32px #000A, 0 1.5px 0 #232323 inset;
        margin-bottom: 28px;
        padding: 28px 20px;
        border: 1.5px solid #232323;
        backdrop-filter: blur(4px);
        position: relative;
        overflow: hidden;
      }
      .main-card::before {
        content: '';
        display: block;
        position: absolute;
        left: 0; top: 0; right: 0; height: 4px;
        background: linear-gradient(90deg, #FE2C55 0%, #00F2EA 100%);
        border-radius: 22px 22px 0 0;
        opacity: 0.8;
      }
      .section-title { font-size: 18px; font-weight: 600; color: #FE2C55; margin-bottom: 16px; display: flex; align-items: center; letter-spacing: 1px; }
      .section-title i { margin-right: 8px; color: #FE2C55; }
      .user-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #FE2C55 60%, #00F2EA 100%); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; font-weight: bold; margin-right: 18px; box-shadow: 0 2px 8px #FE2C5533; }
      .user-info { color: #fff; }
      .user-name { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
      .user-phone { color: #E6E6E6; font-size: 15px; }
      .link-btn { display: block; width: 100%; margin-bottom: 14px; padding: 14px 0; border-radius: 14px; text-align: center; font-weight: 600; font-size: 16px; background: #232323; color: #00F2EA; transition: background 0.2s; }
      .link-btn.notice { background: #FE2C55; color: #fff; }
      .link-btn.message { background: #00F2EA; color: #181A20; }
      .link-btn.notice:hover { background: #ff4b6e; }
      .link-btn.message:hover { background: #1beefc; }
      .action-btn { background: linear-gradient(90deg, #FE2C55 60%, #00F2EA 100%); color: #fff; border: none; border-radius: 14px; padding: 14px 0; font-size: 16px; font-weight: 600; width: 100%; margin-top: 8px; box-shadow: 0 2px 8px #FE2C5533; transition: background 0.2s; }
      .action-btn:active { background: linear-gradient(90deg, #FE2C55 80%, #00F2EA 100%); }
    </style>
  </head>
  <body class="min-h-screen">
    <div class="max-w-md mx-auto py-10 px-4">
      <div class="main-card flex items-center mb-8">
        <div class="user-avatar"><i class="fa fa-user"></i></div>
        <div class="user-info">
          <div class="user-name">小明</div>
          <div class="user-phone">手机号：138****8888</div>
        </div>
      </div>
      <div class="main-card">
        <a href="message_notice.html#message" class="link-btn message mb-4">
          <i class="fa fa-comment-dots mr-1"></i>家庭留言
        </a>
        <button
          class="action-btn mt-2"
          style="background:linear-gradient(90deg,#23272F,#181A20);color:#00F2EA;"
          onclick="logout()"
        >
          <i class="fa fa-sign-out-alt mr-1"></i>退出登录
        </button>
      </div>
    </div>
    <script>
      function logout() {
        window.location.href = 'login.html';
      }
    </script>
  </body>
</html>
